Text

今天要來介紹PIXI的文字Api，它是基於canvas的api創造文字，可以複習一下前不久的【Day06】Canvas-繪製文字

PIXI.Text

let app = new PIXI.Application({width: 500, height: 500,backgroundColor:0xfafad2})
document.body.appendChild(app.view)
let container = new PIXI.Container() 
let PIXIText = new PIXI.Text('來打段文字試試')
app.stage.addChild(container)
container.addChild(PIXIText)

可以用PIXI.TextStyle變換style

const style = new PIXI.TextStyle({
    fontFamily: 'Arial', //字型
    fontSize: 36, //文字大小
    fontWeight: 'bold', //文字粗體
    fill: ['#ffffff', '#FAFAD2'], // 漸層
    stroke: '#4a1850', //文字外框顏色
    strokeThickness: 5, //文字外框寬度
    dropShadow: true, //是否有陰影
    dropShadowColor: '#000000', //陰影顏色
    dropShadowBlur: 2, //陰影模糊度
    dropShadowDistance: 1, //陰影距離
    wordWrap: true, //是否折行
    wordWrapWidth: 440, //多少寬度折行
    lineJoin: 'round' //文字轉折處樣式為圓角
})

要看更多PIXI.Text屬性可以看官網的介紹

PIXI.BitmapText

pixi還有一種方法可以創造文字，點陣文字，相較於PIXI.Text，因為會在事前先載好文字素材，再繪製文字，所以效能更好，如遊戲的快速文字變換。

app.loader
    .add('desyrel', './desyrel.xml')
    .load(textxmlLoad)

    function textxmlLoad(){
      let bitmapText = new PIXI.BitmapText("Hello World", {font: "35px Desyrel", align: "right"})
      container.addChild(bitmapText)
    }

要看更多PIXI.BitmapText屬性可以看官網的介紹

成果畫面：為PIXI.Text範例

～如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]http://pixijs.download/release/docs/PIXI.Text.html
[2]http://pixijs.download/release/docs/PIXI.BitmapText.html